import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { BROWSER_MODE } from 'Constants/webConstants';
import { formatUtcTime } from '../../../utils/index';
import './index.scss';

/**
 * 组件： 文章页
 */
class Article extends React.PureComponent {
  static propTypes = {
    title: PropTypes.string,
    desc: PropTypes.element,
    createTime: PropTypes.string,
    favor: PropTypes.number,
  }
  static defaultProps = {
    favor: -1,
    title: '',
    desc: '',
    createTime: ''
  }
  constructor(props) {
    super(props);
    this.state = {
      favorState: false,
    };
    this.doFavor = ::this.doFavor;
  }
  doFavor() {
    this.setState(prevState => ({
      favorState: !prevState.favorState,
    }));
  }
  render() {
    const { title, createTime, favor, desc, mode } = this.props;
    const { favorState } = this.state;
    const isVertical = BROWSER_MODE.isVertical(mode);
    if (isVertical) {
      return (
        <div className="v-article-detail-project">
          <div className="v-article-detail-wrap">
            <div className="article-header">
              <div className="article-wrap">
                <div className="title">{title || ''}</div>
                <div className="extra-info">
                  <span className="publish-time">{`发布时间： ${createTime ? formatUtcTime(createTime) : ''}`}</span>
                  {favor > -1 &&
                  <span className="favor">{`赞： (${favor || ''})`}</span>
                  }
                  {favor > -1 &&
                  <a
                    href="javascript:void(0)"
                    onClick={this.doFavor}
                    className={`favor-action ${favorState ? 'select' : ''}`}
                  >
                    {''}
                  </a>
                  }
                </div>
              </div>
            </div>
            <div className="content-wrap">
              <div className="article-content">
                {
                  desc || ''
                }
              </div>
            </div>
          </div>
        </div>
      );
    }
    return (
      <div className="article-detail-content-wrap">
        <div className="article-header">
          <div className="article-wrap">
            <div className="title">{title || ''}</div>
            <div className="extra-info">
              <span className="publish-time">{`发布时间： ${createTime ? formatUtcTime(createTime) : ''}`}</span>
              {favor > -1 &&
              <span className="favor">{`赞： (${favor || ''})`}</span>
              }
              {favor > -1 &&
              <a
                href="javascript:void(0)"
                onClick={this.doFavor}
                className={`favor-action ${favorState ? 'select' : ''}`}
              >
                {''}
              </a>
              }
            </div>
          </div>
        </div>
        <div className="content-wrap">
          <div className="article-content">
            {
              desc || ''
            }
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.webReducer
  };
}
export default connect(mapStateToProps)(Article);
